import type { CompanyInfoDto, GroupInfoDto } from '@/api/company/types'
import TableRender, { type TableRenderColumnTypes } from '@/render/TableRender'
import type { AnyObject } from '@/types'
import { Component, Prop } from 'vue-facing-decorator'
import type { VxeColumnSlotTypes, VxeGridPropTypes, VxeTableDataRow } from 'vxe-table'
import toNative from '@/utils/toNative'
import type { FilterDto } from '@/render/FilterRender'

import { exportWesureRecord, getWesureRecordList } from '@/api/insurance/daily'
import { downloadFile } from '@/utils/util'
import DialogRecordDetail from './DialogRecordDetail'
import type { WesureRecordDto } from '@/api/insurance/daily/types'
import dayjs from 'dayjs'
import { Button } from 'ant-design-vue'

@Component
export class InsuranceRecord extends TableRender {
    @Prop() basicData!: GroupInfoDto
    @Prop() companyBasicInfo!: CompanyInfoDto

    noTablePadding = true
    noFilterPadding = true
    filterTheme = 'light'

    showDetail = false
    curItem = {} as WesureRecordDto

    curMonthFirstDay = dayjs().startOf('month').format()
    curMonthLastDay = dayjs().endOf('month').format()

    filterConfig() {
        return {
            insureDay: {
                name: '投保时间',
                element: 'datetime',
                type: 'daterange',
                value: [this.curMonthFirstDay, this.curMonthLastDay],
                params: {
                    valueFormat: 'YYYY-MM-DD'
                },
                span: 12
            }
        } as FilterDto
    }

    tableConfig() {
        const config = super.tableConfig()
        config.height = '400px'
        return config
    }

    tableColumnConfigOld = () => [
        {
            field: 'serveCompanyName',
            title: '派遣单位',
            width: 180
        },
        {
            field: 'comboName',
            title: '方案名称'
        },
        {
            field: 'insurePeoples',
            title: '投保人数'
        },
        {
            field: 'insureDay',
            title: '投保日期'
        },
        {
            field: 'amount',
            title: '金额'
        },
        {
            field: 'increaseRate',
            title: '费率',
            formatter: ({row}) => {
                return (row.increaseRate ?? 0) * 100 + '%'
            }
        },
        {
            field: 'operate',
            title: '操作',
            width: 120,
            fixed: 'right',
            params: {
                buttons: [
                    {
                        text: '导出',
                        event: (row) => this.onExport('single', row.projectId)
                    },
                    {
                        text: '查看详情',
                        event: (row) => this.onShowDetail(row)
                    }]
            },
            slots: {
                default: 'buttons'
            }
        }
    ] as TableRenderColumnTypes<WesureRecordDto>

    onShowDetail(row: WesureRecordDto) {
        this.curItem = row
        this.showDetail = true
    }

    getData() {
        this.onPage({
            type: 'current',
            currentPage: 1
        })
    }

    async onExport(type: 'all' | 'single', projectId?: number) {
        let res = ''
        if (type === 'all') {
            res = await exportWesureRecord({
                insureCompanyType: 'insure002_gsc',
                companyId: this.basicData.companyId,
                beginInsureDay: (this.filters?.insureDay?.value as string[])?.[0] || '',
                endInsureDay: (this.filters?.insureDay?.value as string[])?.[1] || ''
            })
        } else if (type === 'single') {
            res = await exportWesureRecord({
                projectId: projectId as number
            })
        }
        downloadFile(res)
    }

    onLoadData(page: number, size: number, filters: AnyObject) {
        if (!this.basicData?.companyId) return []
        const start = filters?.insureDay?.[0] || ''
        const end = filters?.insureDay?.[1] || ''
        delete filters?.insureDay
        return getWesureRecordList({
            companyId: this.basicData.companyId,
            insureCompanyType: 'insure002_gsc',
            pageNum: page,
            pageSize: size,
            beginInsureDay: start,
            endInsureDay: end,
            ...filters
        })
    }

    renderRightBtns() {
        return (
            <>
                <Button type="primary" onClick={() => this.onExport('all')}>
                    导出列表
                </Button>
            </>
        )
    }

    render() {
        return (
            <>
                <div class="bg-white-dark-100 text-base px-12px py-8px mb-12px">投保记录</div>
                <div>{super.render()}</div>
                <DialogRecordDetail v-model:show={this.showDetail} recordData={this.curItem} />
            </>
        )
    }
}

export default toNative<
    { basicData: GroupInfoDto; companyBasicInfo: CompanyInfoDto },
    { refresh: () => void }
        >(InsuranceRecord)
